<template>
  <div class="wrap">
    <div v-if="enterSuccess">
      <html-mould :imgSrc="imgSrc" :msg="msg"></html-mould>
      <div class="goBack" @click="goBack">
        <button-mould btTitle="返回" btColor="#00b38a"></button-mould>
      </div>
    </div>
    <div class="wrap" v-else>
      <div class="detail">
        <div class="detail-main">
          <div class="logo">
            <img src="~@imgs/logo_hd.png" alt="">
          </div>
          <ul>
            <li><span class="title">员工号：</span><i class="stuff-num">123456</i></li>
            <li><span class="title">手机号：</span><i class="stuff-phone">13811112222</i></li>
          </ul>
        </div>
      </div>
      <div class="selectTime">
        <div class="select-title">
          <i class="iconfont iconfonttime"></i>
          <span>选择时间段</span>
        </div>
        <div class="select-time">
          {{time | formatDate}}
        </div>
      </div>
      <div class="swiper">
        <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
          <swiper-slide v-for="(item, $index) in swiperLists" :key="$index">
            <div class="img" :style="{background: item.bgColor}">
              <img :src="item.img" alt="">
            </div>
            <div class="time-box">
              <div class="time-box-main">
                <span class="time">{{item.time}}</span>
                <i v-show="$index === currentIndex" class="iconfont">&#xe609;</i>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="submit" @click="tosign">
        <button-mould :btTitle='sign' btColor="#00b38a"></button-mould>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import buttonMould from '@components/buttonMould';
  import htmlMould from '@components/htmlMould';
  import selects from '@components/selectDialog';
  import {getSignUpTimes, signUp} from 'services';
  import {mapGetters, mapActions} from 'vuex';
  import {formatDate} from 'utils';
  export default {

    data () {
      return {
        selectTime: '',
        msg: '您已报名！您预约的活动时间段17:30-18:30',
        imgSrc: '../../../assets/images/copyfiles/envelope.png',
        enterSuccess: false,   // 如果没报名显示
        currentIndex: 0,
        swiperLists: [
          {
            img: require('@imgs/badminton2.png'),
            bgColor: '#ffe400',
            time: '17:30 - 18:30',
            id: 1
          },
          {
            img: require('@imgs/badminton3.png'),
            bgColor: 'rgb(238, 105, 80)',
            time: '18:30 - 19:30',
            id: 1
          },
          {
            img: require('@imgs/badminton4.png'),
            bgColor: 'rgb(79, 148, 226)',
            time: '19:30 - 20:30',
            id: 1
          },
          {
            img: require('@imgs/badminton5.png'),
            bgColor: 'rgb(238, 105, 80)',
            time: '20:30 - 21:30',
            id: 1
          }
        ],
        sign: '报名',
        swiperOption: {
          initialSlide: 0,
          observer: true,
          direction: 'horizontal',
          setWrapperSize: true,
          autoHeight: true,
          grabCursor: true,
          slidesPerView: 'auto',
          spaceBetween: 100,
          paginationClickable: true,
          observeParents: true,
          debugger: true,
          effect: 'coverflow',
          centeredSlides: true,
          coverflow: {
            rotate: 10,
            stretch: 0,
            depth: 300,
            modifier: 1,
            slideShadows: true
          },
          onTransitionStart: (swiper) => {
            this.currentIndex = swiper.activeIndex;
            this.selectedTime = this.swiperLists[this.currentIndex].time;
            console.log(this.selectedTime);
          }
        },
        time: 1506331850000
      }
    },
    components: {
      buttonMould,
      htmlMould,
      selects
    },
    methods: {
      goBack () {
        console.log('goBack');
        this.enterSuccess = false;
      },
      tosign () {
        //       提交报名
//        this.enterSuccess = true;
//        this.msg = `您已报名！您预约的活动时间段${this.selectedTime}`;
        signUp().then((res) => {
          if (res.data.return_code === '0') {
            this.enterSuccess = true;
            this.msg = res.data.return_msg;
            this.imgSrc = '../../../assets/images/copyfiles/smilingFace.png';
            this.setToken({
              status: 'success',
              msg: res.data.return_msg
            });
          }
        })
      },
      ...mapGetters(['getToken']),
      ...mapActions(['setToken'])
    },
    mounted() {
      this.swiper.slideTo(2, 1000, false);
      this.signStatus = this.getToken();
      console.log(this.signStatus)
      if (this.signStatus.status === 'success') {
        this.enterSuccess = true;
        this.msg = this.signStatus.msg;
      } else {
        this.enterSuccess = false;
        this.msg = '';
      }
      getSignUpTimes().then((res) => {
        let data = res.data;
        if (data.return_code === '0') {
          data.data.forEach((value, key) => {
            this.swiperLists[key].id = value.id;
            this.swiperLists[key].time = value.desc;
          })
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      }
    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">
  @import "./style.less";
</style>

